<script setup lang="ts">
defineOptions({name: 'OperateLogDetail'})
import {getIsMobile, dateFormat} from "@/utils/helper"
import {useI18n} from "vue-i18n"
import {getOperateLogList} from '@/api/operate-log'

const dataId = ref<number | string | undefined>(0)
const formRef = ref()
const visible = ref<boolean>(false)
const isMobile = getIsMobile()
const {t} = useI18n()
const formItems = ref<any>([
	{key: 'operateId', type: 'input', disabled: true},
	{key: 'ip', type: 'input', disabled: true},
	{key: 'path', type: 'input', disabled: true},
	{key: 'method', type: 'input', disabled: true},
	{key: 'createTime', type: 'input', label: t('common.field.createTime'), disabled: true},
	{
		key: 'params', type: 'input', span: 24,
		props: {disabled: true, type: 'textarea', autosize: {minRows: 2}}
	},
	{
		key: 'operateBefore', type: 'input', span: 24,
		props: {disabled: true, type: 'textarea', autosize: {minRows: 2}},
	},
	{
		key: 'operateAfter', type: 'input', span: 24,
		props: {disabled: true, type: 'textarea', autosize: {minRows: 2}},
	},
])

const formData = ref<any>({
	operateId: undefined
})

interface Props {
	enumData?: Record<string, any>
	languageData?: Record<string, any>
}

const props = defineProps<Props>()

const getData = async () => {
	const {list}: any = await getOperateLogList({page: 1, limit: 1, id: dataId.value})
	list[0].createTime = dateFormat(list[0].createTime, 'Y/m/d H:i:s')
	list[0].params = JSON.stringify(JSON.parse(list[0].params), null, '\t')
	list[0].operateBefore = JSON.stringify(JSON.parse(list[0].operateBefore), null, '\t')
	list[0].operateAfter = JSON.stringify(JSON.parse(list[0].operateAfter), null, '\t')
	Object.assign(formData.value, {...list[0]})
}

watch(() => props.languageData, (newVal: any) => {
	if (newVal.operateLog) {
		formItems.value.forEach((item: any, index: any) => {
			if (!item.label && newVal.operateLog.field[item.key]) {
				formItems.value[index].label = newVal.operateLog.field[item.key]
			}
		})
	}
}, {immediate: true});

const open = (id?: number | string) => {
	visible.value = true
	dataId.value = id
	getData()
}

const close = () => {
	formRef.value.reset()
	visible.value = false
}

defineExpose({open, close})
</script>

<template>
	<div class="form-operate-box">
		<ElDrawer v-model="visible" :size="isMobile ? '100%' : '80%'" :title="t('common.detail')"
			  @close="close">
			<ArtForm ref="formRef" v-model="formData" :items="formItems" :showReset="false"
				 :showClose="false" :showSubmit="false"/>
		</ElDrawer>
	</div>
</template>

<style scoped lang="scss">
.form-operate-box {
	:deep(.el-form-item--label-top .el-form-item__label) {
		margin-left: 3px !important;
		margin-bottom: 2px !important;
	}

	:deep(.el-drawer__header) {
		margin-bottom: 20px;
	}

	:deep(.el-drawer__title) {
		text-align: center;
	}

	:deep(.el-drawer__body) {
		padding-top: 0;
	}

	:deep(.action-buttons-wrapper) {
		margin-top: 8px !important;
		justify-content: flex-end !important;
	}
}
</style>